<template>
	<up-popup v-model:show="show" :round="30">
		<view class="content">
			<image src="@/static/pro-detail-bg.png" mode="widthFix" class="proBg"></image>

			<view class="closeIcon" @click="show = false">
				<image src="@/static/arrow-left.png" mode="widthFix"></image>
			</view>

			<view class="mainImage">
				<image :src="detailInfo.imageUrl" mode="widthFix"></image>
				<view>由瞬刻成画生成照片</view>
			</view>

			<view class="column info">
				<view class="listTitle">已制作文创产品：</view>
				<view class="list center">
					<view class="list-item column">
						<image src="" mode="widthFix"></image>
						<text>冰箱贴 x 1</text>
					</view>
					<view class="list-item column">
						<image src="" mode="widthFix"></image>
						<text>冰箱贴 x 1</text>
					</view>
					<view class="list-item column">
						<image src="" mode="widthFix"></image>
						<text>冰箱贴 x 1</text>
					</view>
				</view>
				<view class="title">广州动物园AI拍照</view>
				<view class="time">订单时间： 2025年11月23日</view>
				<view class="price row">
					<text>50.00</text>
					<text>元</text>
				</view>

				<view class="saveImg center" hover-class="hoverClass" hover-stay-time=".3s">保存图片</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
import { http } from 'uview-plus';
import { ref } from 'vue';

const show = ref(false);
const detailInfo = ref({});

async function init(orderSn) {
	const { data } = await http.get(`/wx/order/selectOrderNo?orderSn=${orderSn}`, {});
	detailInfo.value = data;
	show.value = true;
}

defineExpose({ init });
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	padding-bottom: 30rpx;
	border-radius: 60rpx 60rpx 0 0;
	position: relative;
	height: 80vh;
	overflow-y: auto;

	.proBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.closeIcon {
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		top: 52rpx;
		left: 48rpx;
		z-index: 20;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.mainImage {
		width: 750rpx;
		overflow: hidden;
		position: relative;
		z-index: 10;

		image {
			width: 100%;
			box-shadow: 8rpx 8rpx 10px 0 rgba(0, 0, 0, 0.25);
			border-radius: 60rpx;
		}

		view {
			position: absolute;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 20rpx;
			color: #ffffff;
			z-index: 10;
		}
	}

	.info {
		margin-top: 40rpx;
		position: relative;
		z-index: 10;
		.listTitle {
			font-weight: bold;
			font-size: 26rpx;
			color: #4e3d11;
		}

		.list {
			margin-top: 26rpx;
			margin-left: 36rpx;

			.list-item {
				margin-top: 14rpx;
				image {
					width: 166rpx;
					height: 166rpx;
					border-radius: 50%;
				}
				text {
					font-weight: 500;
					font-size: 20rpx;
					color: #4e3d11;
				}
			}
			.list-item:first-of-type {
				margin-left: 0;
			}
		}

		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			margin-top: 58rpx;
		}

		.time {
			font-size: 20rpx;
			color: #030101;
			margin-top: 20rpx;
		}

		.price {
			margin-top: 22rpx;
			position: relative;
			left: 30rpx;
			text:nth-child(1) {
				font-weight: bold;
				font-size: 40rpx;
				color: #030101;
			}
			text:nth-child(2) {
				font-size: 20rpx;
				color: #000000;
				margin-left: 14rpx;
			}
		}
	}
	.saveImg {
		width: 644rpx;
		height: 100rpx;
		background: #ffffff;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #000000;
	}
}
</style>
